<template>
    <button :class="[size,nom]" class="yk-button">
        <slot></slot>
    </button>
</template>

<script>
    export default {
        props: {
            size: {
                default: 'base',
            },
            nom: {
                default: 'primary',
            }
        }
    }
</script>


<style lang="less" scoped>
    .yk-button {
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        user-select: none;
    }

    .max {
        min-width: 100px;
        height: 48px;
        border-radius: 24px;
    }

    .base {
        min-width: 80px;
        height: 36px;
        border-radius: 18px;
    }

    .min {
        min-width: 72px;
        height: 32%;
        border-radius: 16px;
    }

    .primary {
        background-color: @gray-0;
        color: @gray-4;
    }

    .secondary {
        background-color: @gray-4;
        color: @gray-0;
        border: 1px solid @gray-1;
    }

    .cprimary {
        background-color: @primary-color;
        color: @gray-4;
        font-weight: 600;
    }

    .csecondary {
        background-color: @gray-4;
        color: @gray-0;
    }

    .notallowed {
        opacity: .6;
        cursor: not-allowed;
    }
</style>